<template>
    <el-select v-model="deptId" placeholder="Select" @change="changeHandle">
        <el-option
            v-for="item in deptList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
    </el-select>
</template>

<script setup>
import {listDept} from "@/api/system/dept.js";

defineOptions({
    name: 'DeptList'
})

const deptId = ref(0)
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue', 'change'])
const deptList = ref([])

watch(() => props.modelValue, (newValue, oldValue) => {
    deptId.value = Number(newValue)
})

nextTick(() => {
    getDeptList()
})

const getDeptList = async () => {
    const res = await listDept({}, {
        isUnit: true
    });

    deptList.value = res.data.map(item => {
        return {
            label: item.deptName,
            value: item.deptId
        }
    })

    deptId.value = res.data[0].deptId;

    emit('update:modelValue', res.data[0].deptId)
    emit('change', res.data[0].deptId)

}

const changeHandle = (value) => {
    emit('update:modelValue', value)
    emit('change', value)
}
</script>

<style scoped lang="scss">

</style>